Chế độ đồng thời của React: Giải mã Kết xuất có thể gián đoạn để Nâng cao Trải nghiệm Người dùng

Chế độ đồng thời (Concurrent Mode) của React đại diện cho một sự thay đổi đáng kể trong cách các ứng dụng React kết xuất, giới thiệu khái niệm kết xuất có thể gián đoạn (interruptible rendering). Điều này thay đổi cơ bản cách React xử lý các cập nhật, cho phép nó ưu tiên các tác vụ khẩn cấp và giữ cho giao diện người dùng luôn phản hồi, ngay cả khi chịu tải nặng. Bài viết blog này sẽ đi sâu vào sự phức tạp của Chế độ đồng thời, khám phá các nguyên tắc cốt lõi, chi tiết triển khai và lợi ích thực tế của nó để xây dựng các ứng dụng web hiệu suất cao cho khán giả toàn cầu.

Hiểu về sự cần thiết của Chế độ đồng thời

Theo truyền thống, React hoạt động ở chế độ mà ngày nay được gọi là Chế độ Kế thừa (Legacy Mode) hoặc Chế độ Chặn (Blocking Mode). Ở chế độ này, khi React bắt đầu kết xuất một bản cập nhật, nó sẽ tiến hành đồng bộ và không bị gián đoạn cho đến khi quá trình kết xuất hoàn tất. Điều này có thể dẫn đến các vấn đề về hiệu suất, đặc biệt khi xử lý các thành phần phức tạp hoặc bộ dữ liệu lớn. Trong quá trình kết xuất đồng bộ kéo dài, trình duyệt trở nên không phản hồi, dẫn đến cảm giác lag và trải nghiệm người dùng kém. Hãy tưởng tượng một người dùng tương tác với một trang web thương mại điện tử, cố gắng lọc sản phẩm và gặp phải sự chậm trễ đáng chú ý với mỗi tương tác. Điều này có thể cực kỳ khó chịu và có thể khiến người dùng rời khỏi trang web.

Chế độ đồng thời giải quyết hạn chế này bằng cách cho phép React chia công việc kết xuất thành các đơn vị nhỏ hơn, có thể gián đoạn. Điều này cho phép React tạm dừng, tiếp tục hoặc thậm chí hủy bỏ các tác vụ kết xuất dựa trên mức độ ưu tiên. Các cập nhật có độ ưu tiên cao, chẳng hạn như đầu vào của người dùng, có thể ngắt quãng các quá trình kết xuất có độ ưu tiên thấp đang diễn ra, đảm bảo trải nghiệm người dùng mượt mà và phản hồi nhanh.

Các khái niệm chính của Chế độ đồng thời

1. Kết xuất có thể gián đoạn (Interruptible Rendering)

Nguyên tắc cốt lõi của Chế độ đồng thời là khả năng gián đoạn quá trình kết xuất. Thay vì chặn luồng chính, React có thể tạm dừng việc kết xuất một cây thành phần để xử lý các tác vụ khẩn cấp hơn, chẳng hạn như phản hồi đầu vào của người dùng. Điều này đạt được thông qua một kỹ thuật gọi là lập lịch hợp tác (cooperative scheduling). React nhường lại quyền kiểm soát cho trình duyệt sau một khối lượng công việc nhất định, cho phép trình duyệt xử lý các sự kiện khác.

2. Mức độ ưu tiên (Priorities)

React gán các mức độ ưu tiên cho các loại cập nhật khác nhau. Tương tác của người dùng, chẳng hạn như gõ phím hoặc nhấp chuột, thường được ưu tiên cao hơn so với các cập nhật nền hoặc các thay đổi giao diện người dùng ít quan trọng hơn. Điều này đảm bảo rằng các cập nhật quan trọng nhất được xử lý trước tiên, mang lại trải nghiệm người dùng phản hồi nhanh hơn. Ví dụ, việc gõ vào thanh tìm kiếm phải luôn có cảm giác tức thì, ngay cả khi có các quy trình nền khác đang cập nhật danh mục sản phẩm.

3. Kiến trúc Fiber (Fiber Architecture)

Chế độ đồng thời được xây dựng trên nền tảng React Fiber, một bản viết lại hoàn toàn kiến trúc nội bộ của React. Fiber biểu diễn mỗi thành phần dưới dạng một nút fiber, cho phép React theo dõi công việc cần thiết để cập nhật thành phần và ưu tiên nó một cách phù hợp. Fiber cho phép React chia nhỏ các cập nhật lớn thành các đơn vị công việc nhỏ hơn, giúp cho việc kết xuất có thể gián đoạn trở nên khả thi. Hãy coi Fiber như một trình quản lý tác vụ chi tiết cho React, cho phép nó lập lịch và ưu tiên các tác vụ kết xuất khác nhau một cách hiệu quả.

4. Kết xuất bất đồng bộ (Asynchronous Rendering)

Chế độ đồng thời giới thiệu các kỹ thuật kết xuất bất đồng bộ. React có thể bắt đầu kết xuất một bản cập nhật và sau đó tạm dừng nó để thực hiện các tác vụ khác. Khi trình duyệt rảnh rỗi, React có thể tiếp tục kết xuất từ nơi nó đã dừng lại. Điều này cho phép React tận dụng thời gian rảnh rỗi một cách hiệu quả, cải thiện hiệu suất tổng thể. Ví dụ, React có thể kết xuất trước trang tiếp theo trong một ứng dụng nhiều trang trong khi người dùng vẫn đang tương tác với trang hiện tại, mang lại trải nghiệm điều hướng liền mạch.

5. Suspense

Suspense là một thành phần tích hợp cho phép bạn "tạm dừng" kết xuất trong khi chờ các hoạt động bất đồng bộ, chẳng hạn như tìm nạp dữ liệu. Thay vì hiển thị một màn hình trống hoặc một spinner, Suspense có thể hiển thị một giao diện người dùng dự phòng (fallback UI) trong khi dữ liệu đang được tải. Điều này cải thiện trải nghiệm người dùng bằng cách cung cấp phản hồi trực quan và ngăn giao diện người dùng có cảm giác không phản hồi. Hãy tưởng tượng một bảng tin mạng xã hội: Suspense có thể hiển thị một trình giữ chỗ (placeholder) cho mỗi bài đăng trong khi nội dung thực tế đang được tìm nạp từ máy chủ.

6. Transitions

Transitions cho phép bạn đánh dấu các cập nhật là không khẩn cấp. Điều này cho React biết để ưu tiên các cập nhật khác, chẳng hạn như đầu vào của người dùng, hơn là transition. Transitions hữu ích để tạo ra các chuyển đổi mượt mà và hấp dẫn về mặt hình ảnh mà không làm giảm khả năng phản hồi. Ví dụ, khi điều hướng giữa các trang trong một ứng dụng web, bạn có thể đánh dấu việc chuyển trang là một transition, cho phép React ưu tiên các tương tác của người dùng trên trang mới.

Lợi ích của việc sử dụng Chế độ đồng thời

• Cải thiện khả năng phản hồi: Bằng cách cho phép React gián đoạn kết xuất và ưu tiên các tác vụ khẩn cấp, Chế độ đồng thời cải thiện đáng kể khả năng phản hồi của ứng dụng, đặc biệt là dưới tải nặng. Điều này mang lại trải nghiệm người dùng mượt mà và thú vị hơn.
• Nâng cao trải nghiệm người dùng: Việc sử dụng Suspense và Transitions cho phép bạn tạo ra các giao diện hấp dẫn và thân thiện với người dùng hơn. Người dùng thấy phản hồi ngay lập tức cho các hành động của họ, ngay cả khi đang xử lý các hoạt động bất đồng bộ.
• Hiệu suất tốt hơn: Chế độ đồng thời cho phép React tận dụng thời gian rảnh rỗi hiệu quả hơn, cải thiện hiệu suất tổng thể. Bằng cách chia nhỏ các cập nhật lớn thành các đơn vị công việc nhỏ hơn, React có thể tránh chặn luồng chính và giữ cho giao diện người dùng luôn phản hồi.
• Tách mã và Tải lười (Code Splitting and Lazy Loading): Chế độ đồng thời hoạt động liền mạch với việc tách mã và tải lười, cho phép bạn chỉ tải mã cần thiết cho chế độ xem hiện tại. Điều này có thể giảm đáng kể thời gian tải ban đầu của ứng dụng.
• Thành phần máy chủ (Server Components - Tương lai): Chế độ đồng thời là điều kiện tiên quyết cho Server Components, một tính năng mới cho phép bạn kết xuất các thành phần trên máy chủ. Server Components có thể cải thiện hiệu suất bằng cách giảm lượng JavaScript cần tải xuống và thực thi trên máy khách.

Triển khai Chế độ đồng thời trong ứng dụng React của bạn

Việc kích hoạt Chế độ đồng thời trong ứng dụng React của bạn tương đối đơn giản. Quá trình này phụ thuộc vào việc bạn đang sử dụng Create React App hay một thiết lập xây dựng tùy chỉnh.

Sử dụng Create React App

Nếu bạn đang sử dụng Create React App, bạn có thể kích hoạt Chế độ đồng thời bằng cách cập nhật tệp `index.js` của mình để sử dụng API `createRoot` thay vì API `ReactDOM.render`.

// Trước đây:
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(, document.getElementById('root'));

// Sau này:
import { createRoot } from 'react-dom/client';
import App from './App';

const root = createRoot(document.getElementById('root'));
root.render();

Sử dụng thiết lập xây dựng tùy chỉnh

Nếu bạn đang sử dụng một thiết lập xây dựng tùy chỉnh, bạn cần đảm bảo rằng bạn đang sử dụng React 18 trở lên và cấu hình xây dựng của bạn hỗ trợ Chế độ đồng thời. Bạn cũng sẽ cần cập nhật tệp `index.js` của mình để sử dụng API `createRoot`, như đã trình bày ở trên.

Sử dụng Suspense để tìm nạp dữ liệu

Để tận dụng tối đa Chế độ đồng thời, bạn nên sử dụng Suspense để tìm nạp dữ liệu. Điều này cho phép bạn hiển thị một giao diện người dùng dự phòng trong khi dữ liệu đang được tải, ngăn giao diện người dùng có cảm giác không phản hồi.

Đây là một ví dụ về việc sử dụng Suspense với một hàm `fetchData` giả định:

import { Suspense } from 'react';

function MyComponent() {
 const data = fetchData(); // Giả sử fetchData() trả về một đối tượng giống Promise
 return (
  

   
{data.title}
   
{data.description}
  
 );
}

function App() {
 return (
  Đang tải...

import { useState, useTransition } from 'react';

function MyComponent() {
 const [isPending, startTransition] = useTransition();
 const [value, setValue] = useState('');

 const handleChange = (e) => {
  startTransition(() => {
   setValue(e.target.value);
  });
 };

 return (
  

   
   
Giá trị: {value}
   {isPending && 
Đang cập nhật...
}
  
 );
}

export default MyComponent;